<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="ctx" th:content="${#httpServletRequest.getContextPath()}"/>
    <title>新增固件</title>
    <link rel="stylesheet" th:href="@{/css/admin/base.css}">
    <link rel="stylesheet" th:href="@{/lib/font-awesome/4.7.0/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{/css/admin/app.css}">
</head>

<body>
<div class="app-page">
    <div class="app-page-header">
        <div class="page-title">
            <div class="page-title">新增固件</div>
        </div>
    </div>
    <div class="app-page-content">
        <div class="app-card">
            <div class="app-card-body">
                <form class="form">
                    <input type="hidden" name="versionName" data-name="版本编码">
                    <div class="form-item row">
                        <div class="label">
                            <label>上传固件</label>
                        </div>
                        <div class="body" style="min-width: 350px;">
                            <div class="upload upload-file z-mab" data-input-name="url" data-limit="1"
                                 th:attr="data-url=@{/file/upload/firmware}" data-fieldname="files"
                                 data-upload-success="uploadSuccess">
                                <div class="upload-list upload-list-text"></div>
                                <div class="upload-tips">只能上传固件文件，格式 .zip</div>
                                <div class="upload-error"></div>
                                <div class="input-opacity">
                                    <input type="file" class="input" accept=".zip" style="max-width: 90px;">
                                    <a class="z-btn z-default"><i class="fa fa-upload"></i> 上传</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-item row">
                        <div class="label">
                            <label>固件名称</label>
                        </div>
                        <div class="body">
                            <input type="text" name="name" data-name="固件名称" data-rule="required">
                        </div>
                    </div>
                    <div class="form-item row">
                        <div class="label">
                            <label>版本号</label>
                        </div>
                        <div class="body">
                            <input type="text" name="versionName" data-name="版本号" data-rule="required">
                        </div>
                    </div>
                    <div class="form-item row">
                        <div class="label">
                            <label>大小(mb)</label>
                        </div>
                        <div class="body">
                            <input type="text" readonly="readonly" name="size" data-name="大小" data-rule="required"/>
                        </div>
                    </div>
                    <div class="form-item row">
                        <div class="label">
                            <label>机型</label>
                        </div>
                        <div class="body">
                            <label style="margin-right:10px;margin-bottom:10px;"
                                   th:each="deviceModel: ${deviceModelList}">
                                <input type="checkbox" name="model" th:text="${deviceModel.deviceModel}"
                                       th:value="${deviceModel.deviceModel}" style="margin-right:5px;">
                            </label>
                        </div>
                    </div>
                    <div class="form-item row" style="align-items: flex-start">
                        <div class="label">
                            <label>固件版本说明</label>
                        </div>
                        <div class="body">
                            <textarea name="softwareVersionDescription" placeholder="请填写说明信息（选填）"></textarea>
                        </div>
                    </div>
                    <div class="z-btn-group" style="margin-bottom:0;">
                        <a class="btn-submit z-btn z-primary">保存</a>
                        <a class="z-btn z-default" th:href="@{/firmWare/listByPage}">返回</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script th:src="@{/lib/jquery.min.js}"></script>
<script th:src="@{/lib/layer-v3.1.1/layer/layer.js}"></script>
<script th:src="@{/js/popup.js}"></script>
<script th:src="@{/js/form.js}"></script>
<script th:src="@{/js/admin/app.js}"></script>
<script th:src="@{/js/admin-upload.js}"></script>
<script type="text/javascript" th:inline="javascript">
    //获取context path
    var context = $("meta[name='ctx']").attr("content") || '';
    // 保存固件
    var form = $(".form").form({
        submitSelector: ".form .btn-submit",
        msg: function (msg) {
            popup.tipsTop(msg, 'warning');
        },
        submit: function () {
            var data = {};
            $.each($(".form").serializeArray(), function (index, field) {
                if (data[field.name]) {
                    data[field.name] += "," + field.value;
                } else {
                    data[field.name] = field.value;
                }
            })
            //固件文件是否上传
            if (!data.url) {
                return popup.tipsTop('请上传固件', 'warning');
            }
            //是否选择机型
            if (!data.model) {
                return popup.tipsTop('请选择机型', 'warning');
            }
            //保存固件
            $.ajax({
                type: "POST",
                url: context + "/firmWare/saveFirmWare",
                data: data,
                success: function (obj) {
                    var code = obj.code;
                    if (code == 0) {
                        popup.tipsTop('新增成功','success');
                        setTimeout(function (args) {
                            //跳转到列表界面
                            window.location.href = context + "/firmWare/listByPage";
                        },2000);
                    } else {
                        popup.tipsTop(obj.msg, 'warning');
                    }
                }
            })
        }
    })

    // 上传成功回调
    function uploadSuccess(data) {
        var fileData = data[0];
        // 赋值固件名称和版本号
        $('[name="size"]').val(fileData["size"]);
        $('[name="url"]').val(fileData["flie"]);
    }
</script>
</body>

</html>